<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tex</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-7" id="canvasContainer">
            <canvas id="canvas">抱歉，您的浏览器版本无法兼容该应用！</canvas>
        </div>
        <div class="col-5">
            <!--Draw Setting-->
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <div class="nav-link active" id="segmentTab" onclick="tabChange(this)">管片设置</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link" id="cylinderTab" onclick="tabChange(this)">油缸设置</div>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <!--Segment Setting-->
                    <div class="card-body" id="segmentSetting">
                        <div class="input-group mb-3">
                            <label for="segmentCount" class="input-group-text">数量：</label>
                            <input id="segmentCount" type="number" class="form-control text-end">
                            <button class="btn btn-outline-dark" type="button" onclick="changeSegmentCount()">变更设置</button>
                        </div>
                        <div id="segmentInfo"></div>
                    </div>
                    <!--Cylinder Setting-->
                    <div class="d-none card-body" id="cylinderSetting">
                        <div class="row">
                            <div class="col input-group input-group-sm mb-3">
                                <label for="cylinderCount" class="input-group-text">数量：</label>
                                <input id="cylinderCount" type="number" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col input-group input-group-sm mb-3">
                                <label for="cylinderAngleStart" class="input-group-text">起始油缸角度：</label>
                                <input id="cylinderAngleStart" type="number" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                            <span class="fw-bold">油缸编号设置：</span>
                            <div class="row">
                                <div class="input-group input-group-sm mb-1">
                                    <label for="cylinderWord" class="input-group-text">关键字：</label>
                                    <input id="cylinderWord" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col input-group input-group-sm mb-3">
                                <label for="cylinderNumberStart" class="input-group-text">起始：</label>
                                <input id="cylinderNumberStart" type="number" class="form-control">
                            </div>
                            <div class="col input-group input-group-sm mb-3">
                                <label for="cylinderNumberStep" class="input-group-text">步长：</label>
                                <input id="cylinderNumberStep" type="number" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button type="button" class="btn btn-primary" id="drawButton" onclick="drawRingRose()">绘制 Ring Rose</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/RingRose.js"></script>
<script src="js/form.js"></script>
</body>
</html>